<template>
  <div class="box">
    <div>
      <h2 style="font-weight: 700; display: inline-block">车辆管理</h2>
      用于管理小区里的车辆信息，包括业主、家庭成员及租户的车辆
    </div>
    <div class="tag">
      <el-form
        class="tag"
        ref="form"
        label-width="80px"
        :inline="true"
        size="normal"
      >
        <el-form-item label="">
          <input-view :title="one" v-model="queryData.license_plate" />
        </el-form-item>
        <el-form-item label="">
          <select-view
            :title="tow"
            v-model="queryData.community_code"
            @change="loudong"
            :options="options"
          />
        </el-form-item>
        <el-form-item label="">
          <select-view
            :title="three"
            v-model="queryData.building_code"
            @change="house"
            :options="allL"
          />
        </el-form-item>

        <el-form-item label="">
          <time-view ref="timer" :title="four" v-model="queryData.create_time" />
        </el-form-item>

        <el-form-item class="button">
          <el-button size="small" @click="reset">重置</el-button>
          <el-button size="small" type="primary" @click="serach"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <div class="nothing">
        <el-button
          size="small"
          type="primary"
          @click="$refs.aside.drawer = true"
          style="margin-left: 1400px; margin-top: 15px"
          >新增</el-button
        >
      </div>
      <div class="aside">
        <aside-view ref="aside" @close="close">
          <template #aside>
            <el-form
              :model="formData"
              :rules="rules"
              label-position="top"
              ref="form"
              label-width="80px"
              :inline="false"
              size="normal"
            >
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item label="所属小区" prop="community_code">
                    <select-view
                      v-model="formData.community_code"
                      @change="loudong"
                      :options="options"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="所属栋数" prop="building_code">
                    <select-view
                      v-model="formData.building_code"
                      @change="house"
                      :options="allL"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="所属房产" prop="house_code">
                    <select-view
                      v-model="formData.house_code"
                      @change="member"
                      :options="houselist"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="所属成员" prop="member_id">
                    <el-select v-model="formData.member_id" placeholder="请输入">
                      <el-option
                        v-for="item in memList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>

                    <!-- <select-view v-model="formData.member_id"
                    :options="memList"
                    /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="车辆名称" prop="name">
                    <input-view v-model="formData.name" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="车辆牌照" prop="license_plate">
                    <input-view v-model="formData.license_plate" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="车辆颜色" prop="color">
                    <input-view v-model="formData.color" />
                    <!-- <el-date-picker
                      v-model="formData.color"
                      type="date"
                      placeholder="选择日期"
                      @change="changetime"
                    >
                    </el-date-picker> -->
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="备注">
                    <input-view v-model="formData.remark" />
                  </el-form-item>
                </el-col>

                <el-col :span="10">
                  <el-form-item label="车辆照片">
                    <upload-view v-model="formData.photo" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="anniu">
              <div class="yidong">
                <el-button size="small" @click="refs.aside.drawer = false"
                  >取消</el-button
                >
                <el-button size="small" type="primary" @click="btnOk"
                  >确定</el-button
                >
              </div>
            </div>
          </template>
        </aside-view>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="车辆牌照" prop="license_plate" width="110">
          </el-table-column>
          <el-table-column label="车辆名称" prop="name" width="110">
          </el-table-column>
          <el-table-column label="照片">
            <template slot-scope="{ row }">
              <div class="demo-image__preview">
                <el-image
                  v-if="row.photo"
                  style="width: 100px; height: 100px"
                  :src="row.photo[0]"
                  :preview-src-list="row.photo"
                >
                </el-image>
                <el-image
                  v-else
                  style="width: 100px; height: 100px"
                  src="http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png"
                  :preview-src-list="up"
                />
              </div>
              <!-- <img :src="$webURL + row.photo" alt="" /> -->
            </template>
          </el-table-column>
          <el-table-column label="车辆颜色" prop="color"> </el-table-column>
          <el-table-column label="小区名称">
            <template slot-scope="{ row }">
              {{ row.community?.name }}
            </template>
          </el-table-column>

          <el-table-column label="栋数">
            <template slot-scope="{ row }">
              {{ row.building?.name }}
            </template>
          </el-table-column>
          <el-table-column label="车主姓名">
            <template slot-scope="{ row }">
              {{ row.member?.name }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="联系方式">
            <template slot-scope="{ row }">
              {{ row.member?.tel }}
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="remark"> </el-table-column>
          <el-table-column label="添加时间">
            <template slot-scope="{ row }">
              {{ moment(row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" width="160">
            <template slot-scope="{ row }">
              <a href="javascript:;">
                <el-button size="mini" slot="reference" @click="review(row.id)">
                  <span style="color: #1890ff">编辑</span>
                </el-button>
              </a>
              &nbsp;
              <a href="javascript:;">
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="del(row.id)"
                >
                  <el-button size="mini" slot="reference"
                    ><span style="color: #1890ff">删除</span></el-button
                  >
                </el-popconfirm>
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--分页区域-->
    <div class="page">
      <!-- 3个变量(页码、每页数量、总数) 2个事件(每页数量切换事件/页码切换事件) -->
      <el-pagination
        :page-sizes="[4, 8, 10, 20]"
        :current-page.sync="queryData.current"
        :page-size="queryData.pageSize"
        @size-change="sizeChange"
        @current-change="currentChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import InputView from "../community/components/inputView.vue";
import TimeView from "../community/components/timeView.vue";
import AsideView from "../community/components/asideView.vue";
import SelectView from "../community/components/selectView.vue";
import UploadView from "../community/components/uploadView.vue";
import { getCommunityAll } from "@/api/community/community";

import { getHouse, getHouseList } from "@/api/owners/members";
import {
  addvehicle,
  delvehicle,
  editvehicle,
  getvehicleAll,
  reviewvehicle,
} from "@/api/owners/vehicle";
import { getMemList } from '@/api/owners/pet';
export default {
  components: { InputView, TimeView, AsideView, SelectView, UploadView },
  data() {
    return {
      total:'',
      up:['http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png'],
      isshow: false,
      one: "车辆牌照",
      tow: "小区名称",
      three: "栋数",
      four: "添加时间",
      options: [],
      allL: [],
      houselist: [],
      memList: [],
      tableData: [],
      queryData: {
        current: 1,
        pageSize: 20,
        create_time: "",
        name: "",
        community_code: "",
        building_code: "",
      },
      formData: {
        building_code: '',
        color: "",
        community_code: "",
        house_code: "",
        license_plate: "",
        member_id: '',
        name: "",
        photo: "",
        remark: "",
      },
      rules: {
        building_code:  [{ required: true, message: "请输入", trigger: "blur" }],
        color:  [{ required: true, message: "请输入", trigger: "blur" }],
        community_code:  [{ required: true, message: "请输入", trigger: "blur" }],
        house_code:  [{ required: true, message: "请输入", trigger: "blur" }],
        license_plate:  [{ required: true, message: "请输入", trigger: "blur" }],
        member_id:  [{ required: true, message: "请输入", trigger: "blur" }],
        name:  [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  created() {
    this.initData();
    this.community();
  },

  methods: {
    // 每页数量切换事件
    sizeChange(val) {
      // console.log(val); // 最新每页数量
      this.queryData.pageSize = val;
      this.initData();
    },
    // 页码切换事件
    currentChange(val) {
      // console.log(111);
      // console.log(val); // 最新页码
      this.queryData.current = val;
      this.initData();
    },
    changetime(val) {
      this.formData.adopt_time = moment(val).valueOf();
      // console.log(moment(val).valueOf());
    },
    moment(time) {
      return moment(time).format("YYYY-MM-DD");
    },
    async initData() {
      let res = await getvehicleAll(this.queryData);
      // console.log(res.data.rows);
      // this.tableData = res.data.rows;
      this.total = res.data.count
      this.tableData = res.data.rows.map((item) => {
        return {
          ...item,
          photo: item.photo
            ? item.photo.split(",").map((item) => {
                return this.$webURL + item;
              })
            : null,
        };
      });
    },
    async community() {
      let res = await getCommunityAll(this.queryData);
      // console.log(res.data.rows);
      this.options = res.data.rows;
    },

    async loudong(val) {
      // console.log(val);
      let res = await getHouseList(val);
      //  console.log(res.data);
      this.allL = res.data;
    },

    async house(val) {
      // console.log(val);
      let res = await getHouse(val);
      //  console.log(res);
      this.houselist = res.data;
    },
    async member(val) {
      let res = await getMemList(val);
      // console.log(res.data);
      this.memList = res.data;
    },
    close() {
      this.$refs.aside.id = "";
      this.formData = {
        building_code: '',
        color: "",
        community_code: "",
        house_code: "",
        license_plate: "",
        member_id: '',
        name: "",
        photo: "",
        remark: "",
      };
      this.$refs.form.clearValidate();
    },

    //提交
    async btnOk() {
      await this.$refs.form.validate();
      this.formData.id
        ? await editvehicle(this.formData)
        : await addvehicle(this.formData);

      this.$message.success("提交成功");
      this.initData();
      this.$refs.aside.drawer = false;
    },
    //回显
    async review(id) {
      this.$refs.aside.id = id;
      let res = await reviewvehicle(id);
      this.loudong(res.data.community_code);
      this.house(res.data.building_code);
      //  console.log(res);
      this.formData = res.data;
      this.$refs.aside.drawer = true;
    },
    //删除
    async del(id) {
      // console.log(id);
      let res = await delvehicle(id);
      this.$message.success(res.msg);
      if (this.queryData.current > 1 && this.tableData.length === 1) {
        this.queryData.current--;
      }
      this.initData();
    },
    //搜索
    serach() {
      // console.log(this.$refs.timer.alltime);
      // this.queryData.create_time = this.$refs.timer.alltime
      this.queryData.current = 1;
      this.initData();
    },
    //重置
    reset() {
      this.$refs.timer.timer = "";
      this.queryData = {
        current: 1,
        pageSize: 20,
        create_time: "",
        name: "",
        community_code: "",
        building_code: "",
      };
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100px;
  height: 100px;
}
::v-deep .el-table__header-wrapper {
  background-color: #fafafa !important;
}
.nothing {
  margin-top: 20px;
  height: 60px;
  background-color: #fff;
}
.el-form-item__label {
  padding: 0;
}
.anniu {
  border-top: 1px solid #ccc;
  width: 750px !important;
  height: 50px;
  position: fixed;
  bottom: 0px;
  left: 1152px;
  background-color: white;
  .yidong {
    position: absolute;
    top: 10px;
    right: 30px;
  }
}
.box {
  width: 1640px;
  margin-left: 20px;
  padding: 60px 0;
  ::v-deep .el-input__inner {
    // width: 250px;
    height: 32px !important;
    margin-top: 5px;
  }
  .tag {
    background-color: #fff;
    height: 150px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    .ye {
      height: 150px;
    }
    .bu {
      position: absolute;
      top: 311px;
    }
    .button {
      // display: flex;
      // width: 100px;
      margin-left: 300px;
      margin-top: 30px;
    }
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-left: 30px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
